<template>
  <div style="display: flex;">
    <el-input v-model="inputCode" style="width: 210px; margin-right: 10px;" :placeholder="$t('验证码')" />
    <div :class="'code'" @click="createCode">{{ code }}</div>
  </div>
</template>

<script>
export default {
  data(){
    return {

    }
  },
  methods: {
    createCode() {
      var code = '';
      var codeLength = 4;
      var codeChars = '0123456789';
      for (var i = 0; i < codeLength; i++) {
        var charNum = Math.floor(Math.random() * codeChars.length);
        code += codeChars.charAt(charNum);
      }
      this.code = code;
    },
  },
  mounted() {
    this.createCode()
  }
}
</script>

<style lang="scss" scoped>
.code {
  font-family: Arial;
  font-style: italic;
  color: blue;
  font-size: 20px;
  border: 0;
  padding: 2px 0;
  font-weight: bolder;
  cursor: pointer;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ffffff;
}
</style>